<template>
	<view class="container">
		<view class="header">
			<view class="header-top">
				<text :class="{active: active == 1}" @click="headerTop(1)">今天</text>
				<text :class="{active: active == 2}" @click="headerTop(2)">昨日</text>
				<text :class="{active: active == 3}" @click="headerTop(3)">本周</text>
				<text :class="{active: active == 4}" @click="headerTop(4)">本月</text>
				<text :class="{active: active == 5}" @click="headerTop(5)">上月</text>
				<text :class="{active: active == 6}" @click="headerTop(6)">本年</text>
				<text :class="{active: active == 7}" @click="headerTop(7)">上年</text>
			</view>
			<view class="header-bottom">
				<view class="header-bottom-item">
					<text class="header-bottom-title">
						付款笔数
					</text>
					<view>0</view>
				</view>
				<view class="header-bottom-item">
					<text class="header-bottom-title">
						成交金额
					</text>
					<view>0</view>
				</view>
				<view class="header-bottom-item">
					<text class="header-bottom-title">
						预估收益
					</text>
					<view>0</view>
				</view>
			</view>
		</view>
		
		<!-- main -->
		<view class="main">
			<view class="nav">
				<text>活动名称</text>
				<text>付款笔数</text>
				<text>成交金额</text>
				<text>预估收益</text>
				<text>更多数据</text>
			</view>
			<view class="nav-content-box">
				<view class="nav-content" @click="clickNav" v-for="(item,index) in order" :key="index">
					<text>{{item.chanpinname}}</text>
					<text>{{item.length}}</text>
					<text>{{item.paymoney}}</text>
					<text>{{item.premony}}</text>
					<text>></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				active: 1,
				order: null
			}
		},
		onLoad() {
			uni.getStorage({
				key: 'order',
				success:  (res) => {
					let order = JSON.parse(res.data)
					let arr = []
					let temp = {};
					
					order.forEach(item => {
						if(!temp[item["chanpinname"]]){
							temp[item["chanpinname"]] = [item];
						}else{
							temp[item["chanpinname"]].push(item);
						}
					})
					
					let arr2 = [];
					let index = 0;
					for (let key in temp) {
						arr2.push({length: temp[key].length, premony: 0, paymoney: 0})
						index ++
						temp[key].forEach(item => {
							let obj = arr2[index - 1];
							obj.premony += Number(item.premony)
							obj.chanpinname = item.chanpinname
							obj.paymoney += Number(item.paymoney)
						})
					}
					this.order = arr2;
				}
			});
		},
		methods: {
			headerTop(value){
				this.active = value
			},
			clickNav(){
				uni.navigateTo({
					url: "/pages/income/details/index"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		height: 100vh;
		font-size: 26rpx;
		background-color: #f1f1f1;
		padding-top: 30rpx;
		box-sizing: border-box;
		.header{
			background: #fff;
			.header-top{
				padding: 30rpx 0rpx;
				text-align: center;
				border-bottom: 1px solid #ccc;
				font-size: 30rpx;
				text{
					display: inline-block;
					padding: 0 20rpx;
					&.active{
						color: red;
					}
				}
			}
			.header-bottom{
				display: flex;
				padding-top: 40rpx;
				.header-bottom-item{
					flex: 1;
					text-align: center;
					.header-bottom-title{
						font-size: 24rpx;
						color: #626c6e;
					}
					>view{
						height: 120rpx;
						line-height: 120rpx;
						font-size: 38rpx;
					}
				}
			}
		}
		
		.nav,.nav-content{
			display: flex;
			background: #fff;
			padding: 30rpx 0;
			margin-top: 30rpx;
			color: #626c6e;
			border-bottom: 1px solid #ddd;
			text{
				flex: 1;
				text-align: center;
				font-size: 26rpx;
			}
		}
		.nav-content{
			margin-top: 0;
			color: #000;
		}
	}
</style>